//由于webpack是基于node进行构建的，所以在所有的webpack的配置文件中，任何合法的node代码都是支持的
const path = require('path');

//第二步：引入webpack包
const webpack = require('webpack');

// 导入在内存中生成 html 页面的那个插件,同时自动注入一个bundle.js文件到index.html里面去
// 只要是插件都要放到 plugins 节点中去
const htmlWebpackPlugin = require('html-webpack-plugin');
//vue-loader v15之后，需要配合一个 webpack 插件才能正确使用
const VueLoaderPlugin = require('vue-loader/lib/plugin'); 

// 这个配置文件，其实就是一个 js 文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports = {
    // 需要手动指定入口和出口
    entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包的那个文件
    output:{
        path: path.join(__dirname, './dist'), //指定打包好的文件，输出到那个文件目录中去
        filename:'bundle.js'//指定输出的文件名称
    },
    // devServer:{//设置dev-server命令参数第二种形式（麻烦一些）
    //     // --open --port 8080(默认) --contentBase src --hot
    //     open: true,//自动打开浏览器
    //     port: 8080,//设置启动时打开的端口
    //     contentBase: 'src',//指定托管的根目录
    //     hot: true //启动热更新 第一步 
    // },
    plugins:[//配置 插件 节点
        new webpack.HotModuleReplacementPlugin(),//第三步：new一个热更新的模块对象 
        new htmlWebpackPlugin({ //创建一个在内存中生成 html 首页的插件
            template: path.join(__dirname, './src/index.html'),//指定模版页面，将来会根据指定页面的路径来生成内存中的页面
            filename: 'index.html' //指定生成在内存里面的页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module:{//配置 模块 节点，配置所有的第三方模块的加载器
        rules:[//所有第三方的模块的匹配以及处理规则
            {test: /\.css$/, use:['style-loader','css-loader']},//配置处理 .css 文件的第三方 loader 规则
            {test: /\.less$/, use:['style-loader','css-loader','less-loader']},//这是配置处理 .less 文件的第三方 loader 规则
            {test: /\.scss$/, use:['style-loader','css-loader','sass-loader']},//这是配置处理 .scss 文件的第三方 loader 规则
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use:[{
                    loader:'url-loader',
                    options:{
                        limit: 10240, //设置webpack打包图片文件的规则，在10kb一下默认打包生成base64格式的图片文件
                        name: "[hash:8]-[name].[ext]"
                    }
                }]
            }, //这是配置处理  图片路径的第三方 loader 规则
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'}, //处理请求字体文件的loader
            {test: /\.js$/,use:'babel-loader',exclude:/node_modules/}, //配置babel来转换高级的es语法
            {test: /\.vue$/,use:'vue-loader'} //处理 vue文件的配置规则
        ]
    },
    resolve:{
        alias:{//修改vue被导入时候的路径
            // "vue":"vue/dist/vue.js"
        }
    }
}; 


//使用webpack-dev-server这个工具。来实现自动打包编译的功能
// 1.运行 npm install webpack-dev-server -D (npm install webpack-dev-server --save-dev)把这个工具安装到项目的本地开发依赖
// 2.安装完毕后，这个工具的用法和webpack命令的用法完全一样
// 3.由于我们是在项目中（本地）安装的，不是全局安装的，所以无法使用 webpack-dev-server 作为终端命令直接运行在 终端上，只有在全局安装（-g）的工具才能在终端中使用命令